<template>
	<div class="col-md-4 right-bg">
		<attention v-if="showAttention"></attention>
		<tag-cloud v-if="showTagCloud" @ready="cateForReady"></tag-cloud>
		<popular v-if="showPopular" @ready="hotForReady"></popular>
		<wild-geese v-if="showWildGeese"></wild-geese>
	</div>
</template>

<script>
	import Attention from 'particals/squares/attention'
	import TagCloud from 'particals/squares/tag-cloud'
	import Popular from 'particals/squares/popular'
	import WildGeese from 'particals/squares/wild-geese'
    import {mapGetters} from 'vuex'

	export default {
		computed: {
			showAttention() {
				return this.website.follow
			},
			showTagCloud() {
				return this.website.cate
			},
			showPopular() {
				return this.website.see
			},
			showWildGeese() {
				return this.website.message
			},
            ...mapGetters([
              'website'
            ])
        },
		data() {
			return {
				cateReady: false,
				hotReady: false
			}
		},
		created() {
			if(!this.showTagCloud) {
				this.cateReady = true
			}
			if(!this.showPopular) {
				this.hotReady = true
			}
			this.emitFather()
		},
		methods: {
			cateForReady() {
				this.cateReady = true
				this.emitFather()
			},
			hotForReady () {
				this.hotReady = true
				this.emitFather()
			},
			emitFather() {
				if(this.cateReady && this.hotReady) {
					this.$emit('ready')
				}
			}
		},
		components: {
			Attention,TagCloud,Popular,WildGeese
		}
	}
</script>

<style lang="scss" type="text/css">
	.right-bg {
		.panel {
			display: block;
		    margin-bottom: 30px;
		    box-shadow: 0 0 5px #c2c2c2;
		}
		.panel-bg{
			.panel-heading {
			    font-size: 14px;
			    color: #666;
			    border-bottom: 1px solid #eaeaea;
			    background-color: #fbfbfb;
			    margin: 0;
			    padding: 10px 15px;
			}
		}
		.panel-remove {
		    float: right;
		    margin: 0 0 0 5px;
		    cursor: pointer;
		}
	}
</style>